<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>手机笔画输入法 (网页版) - A.TNG Labs Innovations</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="手机笔画输入法 笔画输入 手机输入 A4笔画输入 在线输入 JS输入法 中老年输入法 打字" />
<script type="text/javascript" src="/ezkeypad/media/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/ezkeypad/media/jquery.timers.js"></script>
<script type="text/javascript">
var g_service_ready = false;
var g_loading_timeout = 30; // seconds
var g_process_interval = 1; // seconds
var g_process_spend = 0;

function show_progress_bar() {
    html_src = '<div id="progress_bar" style="position: absolute; left: 50px; top: 30px; text-align: left; font-weight: bold;"><span id="progress_bar_label">加载中...</span><br><div id="progress_bar" style="width: 300px; height: 10px; border: 1px solid #949dad; margin-top: 5px; padding: 1px;"><div id="progress_running" style="height: 10px; width: 2px; background-color: #bbc2ee;"></div></div></div>';
    $('body').append(html_src);
    
    // set timer
    $('#progress_running').oneTime(g_process_interval*1000, function () {
        g_process_spend += g_process_interval;
        w = g_process_spend*300/g_loading_timeout;
        $(this).css({'width':w});
        
        $(this).everyTime(g_process_interval*1000, 'progress_bar_timer', function () {
            g_process_spend += g_process_interval;
            if (g_service_ready) {
                $(this).stopTime('progress_bar_timer');
                $(this).css({'width':300});
                $(this).oneTime(g_process_interval*1000, function () {
                    // start to serve. 
                    $('#progress_bar').remove();
                    $('#main-panel').css({'visibility':'visible'});
                    initial_service();
                });
            } else {
                if (g_process_spend > g_loading_timeout) {
                    $(this).stopTime('progress_bar_timer');
                    $(this).css({'width':300});
                    // notify user to refresh
                    $('#progress_bar_label').html('加载失败，<a href="javascript:window.location.reload();">请刷新</a>');
                } else {
                    w = g_process_spend*300/g_loading_timeout;
                    $(this).css({'width':w});
                }            
            }
        });
    });
}

/*
 *  Server var
 */
{% if is_dev %}
var g_debug_enable = true;
{% else %}
var g_debug_enable = false;
{% endif%}
 
$(document).ready(function () {
    // start to show progress bar
    //console.log('in document.ready');
    show_progress_bar();
});
</script>
<!-- additional html/js/css/image goes here -->
<link rel="stylesheet" type="text/css" href="/ezkeypad/media/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="/ezkeypad/media/main.css">
<script type="text/javascript" src="/ezkeypad/media/effects.core.min.js"></script>
<script type="text/javascript" src="/ezkeypad/media/effects.drop.min.js"></script>
<script type="text/javascript" src="/ezkeypad/media/main.js"></script>
<script type="text/javascript" src="/ezkeypad/media/stroketable.js"></script>
<script type="text/javascript" src="/ezkeypad/media/ime.js"></script>

</head>
<body>
<div id="main-panel" style="visibility: hidden;">
    <div id="copyright-panel">
        ©2009 <a href="http://jiyu.wordpress.com.cn/about/" target="_blank">A.TNG Labs Innovations</a><br>
        <span style="color: grey;">({{ rev_number }})</span>
    </div>
    <div id="copy-result"></div>
    <div id="empty-result"></div>
    <div id="button1"></div>
    <div id="button2"></div>
    <div id="button3"></div>
    <div id="button4"></div>
    <div id="button5"></div>
    <div id="button6"></div>
    <div id="button7"></div>
    <div id="button8"></div>
    <div id="button9"></div>
    <div id="button0"></div>
    <div id="buttonstar"></div>
    <div id="buttonwell"></div>
    <div id="previous-page"></div>
    <div id="next-page"></div>
    <div id="button-delete"></div>
    <div id="button-ok"></div>
    <div id="panel-container">
        <div id="input-panel"></div>
        <div id="input-option-separator"></div>
        <div id="previous-page-sign"></div>
        <div id="option-panel"></div>
        <div id="next-page-sign"></div>
    </div>  
    <div id="im-sign">大写字母</div>
    <div id="char-result-container"><textarea rows="3" cols="78" id="char-result"></textarea></div>
</div>
<div id="model-panel"></div>
<div id="tip-panel">
    <div id="tip-title-panel"><b>提示</b></div>
    <div id="tip-content-panel">
        <h2>简介</h2>
        <p>模拟手机键盘的输入方式，帮助中老年用户解决电脑输入的问题。</p>
        <h2>支持的输入方式</h2>
        <p><ul>
            <li>中文输入。键1-横、键2-竖、键3-撇、键4-点、键5-折，此五种笔画结合即可组装出任意一个汉字。</li>
            <li>字母输入。支持输入大写字母和小写字母，按键可以参考普通手机键盘布局。</li>
            <li>数字输入。支持</li>
            <li>符号输入&nbsp;<span style="color: red; font-style: italic; font-size: 85%">不可用</span></li>
        </ul></p>
        <p><b>注：一个鼠标即可完全替代复杂的键盘。</b></p>
        <div id="tip-env-check"></div>
        <div id="tip-notify-panel"><input type="checkbox" id="tip-notify"><span id="tip-notify-label">&nbsp;下次不再提醒</span></div>
        <div id="tip-button-panel">
            <input type="button" id="tip-start-service" value="开始使用">&nbsp;&nbsp;
        </div>
    </div>    
</div>
{% if not is_dev %}
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8604465-1");
pageTracker._trackPageview();
} catch(err) {}</script>
{% endif %}
</body>
<!-- additional html/js/css/image end -->
<script type="text/javascript">
window.onload = function () {
    // finish download all necessary js/css/image
    // start service
    //console.log('in window.onload');
    g_service_ready = true;
};
</script>
</html>